<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/7/31
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme()
            +"://"
            +request.getServerName()
            + ":"
            +request.getServerPort()
            +request.getContextPath()
            +"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>邮箱验证</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/webjars/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {
            var flag = false;

            $("#code_img").click(function () {
                this.src = "kaptcha.jpg?d=" + new Date();
            });
            $("#wordVerification").click(function () {
                $.ajax({
                    type:"POST",
                    url:"emailServlet",
                    data:{
                        code:$("#code").val(),
                        action:"wordVerification",
                    },
                    success:function (data) {
                        if(data===true) {
                            flag = true;
                            $("span.errorMsg").text("文字验证通过！");
                            $("#code").attr("disabled",true);
                            $("#code_img").attr("disabled",true);
                            $("#wordVerification").attr("disabled",true);
                        }else{
                            $("span.errorMsg").text("验证码错误！");
                        }
                    },
                    dataType:"json"
                })
            });
            var countDown = function (count) {
                //1.获取当前系统时间
                //2.获取 locksecends 后的系统时间
                //3.用cookie保存到期时间
                //4.每次加载后获取cookie中保存的时间
                //5.用到期时间减去当前时间获取倒计时
                var endTime = $.cookie("endTime");
                if (endTime === null || endTime === undefined || endTime === 'undefined' || endTime === 'null') {
                    var now = new Date().getTime();  //当前时间戳
                    endTime = count * 1000 + now;  //结束时间戳
                    $.cookie("endTime", endTime);  //将结束时间保存到cookie
                }
                $("#sendMail").attr("disabled",true);
                $("#sendMail").html('(' + count + ')秒后重新获取');
                var timer = setInterval(function () {
                    count--;
                    $("#sendMail").html('(' + count + ')秒后重新获取');
                    if (count <= 0) {
                        //倒计时结束清除cookie值
                        $.cookie("endTime", null);
                        $("#sendMail").attr("disabled",false);
                        $("#code").attr("disabled",false);
                        $("#code_img").attr("disabled",false);
                        $("#wordVerification").attr("disabled",false);
                        flag=false;
                        $("#sendMail").html("发送邮箱验证码");
                        clearInterval(timer);
                    }
                }, 1000);
            };
            if ($.cookie("endTime") !== undefined && !isNaN($.cookie("endTime"))) {  //读取到了cookie值
                var endTime = $.cookie("endTime");
                var now = new Date().getTime();  //当前时间戳
                var count = parseInt((endTime - now) / 1000);
                if (count <= 0) {
                    $.cookie("endTime", null);
                } else {
                    $("#code").attr("disabled",true);
                    $("#code_img").attr("disabled",true);
                    $("#wordVerification").attr("disabled",true);
                    flag=true;
                    countDown(count);
                }
            }

            $("#sendMail").click(function () {
                if(flag===false){
                    $("span.errorMsg").text("你必须先通过文字验证！");
                    return false;
                }else{
                    $("#sendMail").attr("disabled",true);
                    $("#code_img").click();
                    $.ajax({
                        type:"POST",
                        url:"emailServlet",
                        data:{
                            action:"sendEmail",
                        },
                        success:function () {
                            countDown(100);
                            $("span.errorMsg").text("验证码发送成功，请注意查收。");
                        },
                    })
                }
            });
            $("#sub_btn").click(function () {
                if($("#emailCode").val()==null){
                    $("span.errorMsg").text("请输入邮箱验证码！");
                    return false;
                }
            });
        });
    </script>
</head>
<body>
<div>你会收到一封电子邮箱来验证身份，不过你必须先通过文字验证</div>
<input type="text" tabindex="1" name="code" id="code" style="width:80px"><img id="code_img" src="kaptcha.jpg"  style="width:100px; height:28px">
    <button type="button" id="wordVerification">验证</button>
<br>
<button type="button" id="sendMail">发送邮箱验证码</button>
<form action="emailServlet" method="post">
    <input type="hidden" name="action" value="emailVerification" >
<input type="text" placeholder="请输入邮箱验证码" tabindex="1" name="emailCode" id="emailCode">
    <input type="submit" value="身份验证" id="sub_btn">
</form>
<span class="errorMsg">
    ${sessionScope.msg}
</span>
</body>
</html>
